<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V视界-个人页面</title>
    <link
      rel="stylesheet"
      type="text/css"
      th:href="@{/static/css/common.css}"
      href="../../static/css/common.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      th:href="@{/static/css/iconfont01.css}"
      href="../../static/css/iconfont01.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      th:href="@{/static/css/personalPage.css}"
      href="../../static/css/personalPage.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
      href="../../static/customAlertConfirm/customAlertConfirm.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      th:href="@{/static/css/personalPage-myFocus.css}"
      href="../../static/css/personalPage-myFocus.css"
    />
  </head>
  <body>
    <div class="top" th:fragment="top">
      <div id="top">
        <!-- logo -->
        <div id="logo-search">
          <div class="logo">
            <img
              src="../../static/img/logo.jpg"
              th:src="@{/static/img/logo.jpg}"
              alt=""
            />
          </div>
          <div class="top-search" th:replace="~{home::topSearch}">
            <span><i class="iconfont">&#xe623;</i></span>
            <input type="text" placeholder="请输入搜索内容" id="top-input" />
          </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn" th:replace="~{personalPage::#fn}">
          <div class="home fn">
            <a
              class="icon"
              href="home.html"
              th:href="@{/blog/getMyConnectionBlog(msg='登录成功')}"
              ><i class="iconfont">&#xe625;</i></a
            >
          </div>
          <div class="hot fn">
            <a
              class="icon"
              href="hot.html"
              th:href="@{/blog/getIndexBlog(state=2)}"
              ><i class="iconfont">&#xe628;</i></a
            >
          </div>
          <div class="message fn">
            <a
              class="icon"
              href="message.html"
              th:href="@{/message}"
              ><i class="iconfont">&#xe908;</i></a
            >
          </div>
          <div class="private border fn">
            <a
              class="icon"
              href="personalPage.html"
              th:href="@{/my/toMyInfo}"
              ><i class="iconfont">&#xe60a;</i></a
            >
          </div>
        </div>
        <!-- 登录，设置等-->
        <div class="access" th:replace="home::access"></div>
      </div>
    </div>
    <div id="content">
      <div class="list">
        <ul>
          <a th:href="@{/my/toMyInfo}">
            <span><i class="iconfont">&#xe7c6;</i></span>
            我的主页
          </a>
          <a class="color" th:href="@{/my/toMyIdols}">
            <span><i class="iconfont">&#xe65d;</i></span>
            我的关注
          </a>
          <a th:href="@{/my/toMyFans}">
            <span><i class="iconfont">&#xe648;</i></span>
            我的粉丝
          </a>
          <a th:href="@{/my/toMyLike}">
            <span><i class="iconfont">&#xe694;</i></span>
            我的点赞
          </a>
          <a th:href="@{/my/toMyCollection}">
            <span><i class="iconfont">&#xe647;</i></span>
            我的收藏
          </a>
          <a th:href="@{/my/echoMyMessage}">
            <span><i class="iconfont">&#xe626;</i></span>
            修改信息
          </a>
          <a th:href="@{/personalPage-pswdChange}">
            <span><i class="iconfont">&#xe64b;</i></span>
            修改密码
          </a>
        </ul>
      </div>
      <div id="news">
        <div class="focusList">
          <h4 class="listTitle">已关注的用户</h4>
          <script th:inline="javascript">
            const listTitle=document.querySelector('.listTitle')
            let list=[[${list}]]
            console.log(list.length)
            if (list.length==0){
                listTitle.innerHTML='暂未关注任何用户'
            }
          </script>
          <ul>
            <li class="focusLi" th:each="user:${list}" th:uid="${user.id}">
              <div class="headPhoto">
                <img
                  src="../../static/img/banner.jpg"
                  th:src="@{${user.avatarUrl}}"
                  alt="用户头像"
                />
              </div>
              <div class="userInfoli">
                <div class="user-msg">
                  <p th:text="${user.username}" class="userName">用户名称</p>
                  <p th:text="${user.label}" class="userLabel">个性签名</p>
                </div>
              </div>
              <div>
                <button
                  class="followBtn al-attention"
                  onclick="personAttention(this)"
                  th:uid="${user.id}"
                >
                  <i class="iconfont">&#xe664;</i>已关注
                </button>
              </div>
            </li>
          </ul>
          <div class="nomore hidden">
            <div class="bar"></div>
            <div>没有更多内容了</div>
            <div class="bar"></div>
          </div>
        </div>
      </div>
      <div id="right-bar" th:replace="~{hot-search::#right-bar}">
        <div id="hot">
          <div class="hot-top">
            <div class="hot-top-content"><p>热搜</p></div>
            <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
          </div>
        </div>
        <a class="return-top" href="#">
          <i class="iconfont">&#xea7d;</i>
        </a>
      </div>
    </div>
    <div th:replace="~{personalPage::publishBlogBox}"></div>
  </body>
  <script
    type="text/javascript"
    src="../../static/js/jquery3.7.1.min.js"
    th:src="@{/static/js/jquery3.7.1.min.js}"
  ></script>
  <script
    type="text/javascript"
    th:src="@{/static/js/common.js}"
    src="../js/common.js"
  ></script>
  <script
    type="text/javascript"
    th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
    src="../customAlertConfirm/customAlertConfirm.js"
  ></script>
  <script
    type="text/javascript"
    th:src="@{/static/js/personalPage-publish.js}"
    src="../js/personalPage-publish.js"
  ></script>
  <script
    type="text/javascript"
    th:src="@{/static/js/personalPage-myFocus.js}"
    src="../js/personalPage-myFocus.js"
  ></script>
  <script type="text/javascript" th:src="@{/static/js/hot-search.js}"></script>
  <script
    type="text/javascript"
    th:src="@{/static/js/loadingMyFocus.js}"
  ></script>
</html>
